<template>
	<div class="Disease">
		<el-row>
			<!-- 疾病目录列表 -->
			<el-col :span="8">
				<!-- 文字 -->
				<div class="grid-content bg-purple" id="left">
					<div class="header">
						<section>
							<span>疾病目录分类</span>
						</section>
						<section>
							<el-button type="info" @click="chongzhi()">重置</el-button>
							<el-button type="primary" icon="el-icon-search" @click="getsousuo()">搜索</el-button>
						</section>
					</div>
					<!-- 搜索输入框 -->
					<div style="margin-top: 15px;">
						<el-input placeholder="请输入内容" v-model="diseaseselect.DicaName" class="input-with-select"
							style="width:240px; margin-right: 10px;"></el-input>
						<el-select v-model="value" placeholder="无" ref="optionRef" style="width: 100px;" @change="xiala($event,value)">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
					<!-- 无限滚动 -->
					<div style="height: 730px; overflow:auto">
						<div style="height: 730px; width: 100px; margin-left: 40px;">
							<ul v-for="(item,index) in DiseCategoryQuery" class="infinite-list"
								style="overflow:auto; width: 260px;">
								<li class="infinite-list-item"
									style="background-color:#f2f2f2 ;margin: 5px 0px; height: 40px; text-align: center; cursor: pointer;" @click="getgundong(index,item)">{{ item.dicaName }}</li>
							</ul>
						</div>
					</div>
				</div>
			</el-col>
			<!-- 疾病目录分类 -->
			<el-col :span="15">
				<div class="grid-content bg-purple-light">
					<div class="header-light">
						<section class="header-light">
							<ul>
								<span>疾病目录列表</span>
								<span>当前疾病分类：{{this.nowdiseade}}</span>
							</ul>
						</section>
						<section>
							<el-button type="primary" class="el-icon-upload2" @click="dialogVisible = true">添加</el-button>
							<el-button type="danger" @click="getshanchu()">批量删除</el-button>
						</section>
					</div>
					<!-- 数据表格 -->
					<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
						@selection-change="handleSelectionChange" :stripe="true">
						<el-table-column type="selection" width="55">
						</el-table-column>
            <el-table-column prop="id" label="序号" width="120"></el-table-column>
            <el-table-column prop="diseCategoryID" label="疾病编码" width="120"></el-table-column>
						</el-table-column>
						<el-table-column prop="diseaseName" label="疾病名称" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="diseaseCode" label="拼音助记码" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="delMark" label="删除状态" show-overflow-tooltip>
						</el-table-column>
						<el-table-column  label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button type="warning" @click="getxiugai(scope.$index,scope.row)">修改</el-button>
              </template>
						</el-table-column>
					</el-table>
          <!-- f分页 -->
					<div class="block">
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="diseaseselect.page" :page-sizes="[10]" :page-size="diseaseselect.limit"
							layout="total, prev, pager, next, jumper" :total="total">
						</el-pagination>
					</div>
          <!-- 添加对话框 -->
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            疾病助记编码:<el-input v-model="diseaseadd.diseaseCode" placeholder="请输入疾病助记编码" style="margin-bottom: 10px;"></el-input>
            疾病名称:<el-input v-model="diseaseadd.diseaseName" placeholder="请输入疾病名称" style="margin-bottom: 10px;"></el-input>
            国际ICD编码:<el-input v-model="diseaseadd.diseaseICD" placeholder="请输入国际ICD编码" style="margin-bottom: 10px;"></el-input>
            疾病所属分类(数字类型):<el-input v-model="diseaseadd.diseCategoryID" placeholder="请输入疾病所属分类" type="number" style="margin-bottom: 10px;"></el-input>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="gettianjia()">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 修改对话框 -->
            <el-dialog
              title="提示"
              :visible.sync="dialogVisibleupdate"
              width="30%"
              :before-close="handleClose">
              疾病助记编码:<el-input v-model="diseaseupdate.diseaseCode" placeholder="请输入疾病助记编码" style="margin-bottom: 10px;"></el-input>
              疾病名称:<el-input v-model="diseaseupdate.diseaseName" placeholder="请输入疾病名称" style="margin-bottom: 10px;"></el-input>
              疾病所属分类:<el-input v-model="diseaseupdate.diseCategoryID" placeholder="请输入疾病所属分类" style="margin-bottom: 10px;"></el-input>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleupdate = false">取 消</el-button>
                <el-button type="primary" @click=" getqueding()">确 定</el-button>
              </span>
            </el-dialog>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import disease from '@/api/his/disease'
  import infiniteScroll from "vue-infinite-scroll"
	export default {
		data() {
			return {
				tableData: [],
				multipleSelection: [],
        value:0,
				options: [{
					value: 1,
					label: '中医'
				}, {
					value: 2,
					label: '西医'
				}],

				DiseCategoryQuery: [],
        //添加
        dialogVisible:false,
        //修改
        dialogVisibleupdate:false,
        diseaseupdate:{
          id:0,
          diseaseCode:'',
          diseaseName:'',
          diseaseICD:'',
          diseCategoryID:'',
          delMark:1,
        },
        //添加对象
        diseaseadd:{
          id:0,
          diseaseCode:'',
          diseaseName:'',
          diseaseICD:'',
          diseCategoryID:'',
          delMark:1,
        },
        //修改对象
         diseaseupdate:{
           id:0,
           diseaseCode:'',
           diseaseName:'',
           diseaseICD:'',
           diseCategoryID:'',
           delMark:1,
         },
         //疾病分类查询对象
         diseaseselect:{
           page:1,
           limit:10,
           DicaName:'',
           DicaType:0,
           diseCategoryID:1,
         },
         //无限回滚回调函数参数
         huigun:{
           tx_page:1,
           tx_limit:10,
           tx_count:0,
           disabled_x:false,
         },
         //总数
         total:0,
        //删除数组
        ids:[],
        //当前疾病
        nowdiseade:'阿米巴病',
        //重置
			}

		},

		methods: {
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
        this.diseaseselect.page=val
        disease.getdiseaseInfo(this.diseaseselect).then((res)=>{
          console.log(res)
          this.tableData=res.data.data.disease
        })
			},
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            })
        .catch(_ => {});
        },
      //添加按钮函数
      gettianjia(){
        disease.adddisease(this.diseaseadd).then((res)=>{
          console.log(res)
          if(res.data.data.flag==true){
            alert("添加成功")
          }else{
            alert("添加失败")
          }
        })
        this.dialogVisible=false;
      },
      //修改按钮函数
      getqueding(){
        this.dialogVisibleupdate = false
        disease.updatedisease(this.diseaseupdate).then((res)=>{
          console.log(res)
          if(res.data.data.flag==true){
            alert("修改成功")
            disease.getdiseaseInfo(this.diseaseselect).then((res)=>{
              console.log(res)
               this.total=res.data.data.total
              this.tableData=res.data.data.disease
            })
          }else{
            alert("修改失败")
          }
        });


      },
      getxiugai(index,row){
          this.dialogVisibleupdate = true
          this.diseaseupdate.id=row.id
          this.diseaseupdate.diseaseCode=row.diseaseCode
          this.diseaseupdate.diseaseName=row.diseaseName
          this.diseaseupdate.diseaseICD=row.diseaseICD
          this.diseaseupdate.diseCategoryID=row.diseCategoryID
      },
      //搜索
      getsousuo(){
          disease.pageDiseCategoryQuery(this.diseaseselect).then((res)=>{
              console.log(res)
              console.log(this.diseaseselect.DicaName)
              this.DiseCategoryQuery=res.data.data.disecategory
              this.total=res.data.data.total
          })
      },
      //删除
      getshanchu(){
        for(var i=0;i<this.$refs.multipleTable.selection.length;i++){
          this.ids.push(this.$refs.multipleTable.selection[i].id)
          }
        disease.deletedisease(this.ids).then((res)=>{
          console.log(res)
          if(res.data.data.flag==true){
            alert("删除成功")
            disease.getdiseaseInfo(this.diseaseselect).then((res)=>{
              console.log(res)
               this.total=res.data.data.total
              this.tableData=res.data.data.disease
            })
          }else{
            alert("删除失败")
          }
        })
      },
      //添加诊断分类
          tianjiazhenduan(){
            disease.pageDiseCategoryQuery(this.diseaseselect).then((res)=>{
                console.log(res.data.data.disecategory)
                this.DiseCategoryQuery.push(res.data.data.disecategory)
                this.total=res.data.data.total
                 console.log(this.DiseCategoryQuery)
            })
          },
      load(){
          console.log("111")
      },
      //无限滚动的li函数
      getgundong(index,item){
        this.diseaseselect.diseCategoryID=item.id
        this.nowdiseade=item.dicaName
        disease.getdiseaseInfo(this.diseaseselect).then((res)=>{
          console.log(res)
           this.total=res.data.data.total
          this.tableData=res.data.data.disease
        })
      },
      //无限滚动的回调函数

      //下拉
      xiala(e,val){
         this.diseaseselect.DicaType=val
         console.log(this.diseaseselect.DicaType)
         console.log(this.diseaseselect.diseaseselect)
      },
      //重置
      chongzhi(){
        this.diseaseselect.diseCategoryID=1,
        console.log(this.diseaseselect)
        disease.getdiseaseInfo(this.diseaseselect).then((res)=>{
            console.log(res)
            this.total=res.data.data.total
            this.tableData=res.data.data.disease
          }),
        disease.getAllDiseCategory(this.diseaseselect).then((res)=>{
            console.log(res)
            this.DiseCategoryQuery=res.data.data.disecategory
             console.log(this.DiseCategoryQuery)
        }),
          this.nowdiseade='阿米巴病'
      },
		},
    beforeMount(){
      disease.getAllDiseCategory().then((res)=>{
          this.DiseCategoryQuery=res.data.data.disecategory
      }),
      disease.getdiseaseInfo(this.diseaseselect).then((res)=>{
        console.log(res)
          this.total=res.data.data.total
          this.tableData=res.data.data.disease
        })
    },


	}
</script>

<style>
	.Disease {
		background-color: white;

		.header {
			display: flex;
			justify-content: space-between;

			select {
				span {
					margin: 10px;
				}
			}
		}

		;

		.header-light {
			display: flex;
			justify-content: space-between;
		}
;
	}

	#left {
		margin-right: 20px;
		background-color: white;
	}

	.block {
		margin: 20px 0px;
		display: flex;
		justify-content: center;
	}
  li{
    text-decoration: none;
  }
  ul{
    list-style: none;
  }
</style>
